<template>
	<view>
		<view v-if=""></view>
		<NavBar text='预约挂号' />
		<!--  -->
		<view class="backgrpund">
			<view style="width: 100%; height: 150rpx;"></view>
			<view class="suosuostyleInput flxAlign flx2">
				<view class="flx2">
					<view class="flxAlign">
						<u-icon name="search" size="35rpx" color='#fff'></u-icon>
					</view>
					<view>
						<input style="margin-left: 15rpx; width: 300rpx;" v-model="sousuo" placeholder-class="plc"
							placeholder="搜索疾病/医院/医生" />
					</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view style="position: relative;">
			<view style="border-radius: 20rpx 20rpx 0rpx 0rpx; background-color: #fff; position: absolute; top: -50rpx; width: 100%;">
				<view class="styletop flx">
					<view v-for="(item,index) in menList" :key="index">
						<view class="flx2">
							<view class="styletop_image">
								<image :src="item.image"></image>
							</view>
						</view>
						<view class="styletop_name">{{item.name}}</view>
					</view>
				</view>
			</view>	
		</view>
		<view style="width: 100%; height: 170rpx;"></view>
		<view style="width: 100%; height: 20rpx; background-color: #e8e8e8;"></view>
		<!-- 筛选 -->
		<view>
			<view class="flx shanxuan" style="width: 90%; margin:0 auto; margin-top: 30rpx;">
				<view class="flx1 shanxuan_">
					<view class="shanxuan_text">综合排序</view>
					<view class="flxAlign" style="margin-top:10rpx; margin-left: 5rpx">
						<view class="sanjiao"></view>
					</view>
				</view>
				<view class="flx1 shanxuan_">
					<view class="shanxuan_text">距离最近</view>
					<view class="flxAlign" style="margin-top:10rpx; margin-left: 5rpx">
						<view class="sanjiao"></view>
					</view>
				</view>
				<view class="flx1 shanxuan_">
					<view class="shanxuan_text">筛选</view>
					<view class="flxAlign" style="margin-top:10rpx; margin-left: 5rpx;">
						<view class="sanjiao"></view>
					</view>
					
				</view>
			</view>
		</view>
		
		<view style="width: 100%; height: 2rpx; background-color: #e8e8e8; margin-top:30rpx;"></view>
		
		<view class="styleIndex">
			<view class="styleIndex_" v-for="(item,index) in doctorList" :key="index" @click="clickdortor(item)">
				<view class="styleIndex_j flx">
					<view class="styleIndex_j_image">
						<image :src="item.Image"></image>
					</view>
					<view class="styleIndex_j_text flxAlign">
						<view style="width: 100%;">
							<view class="header">{{item.text}}</view>
							<view class="array flx1">
								<view class="array_" v-for="(items,indexy) in item.arraytext" :key="indexy">
									{{items}}
								</view>
							</view>
							<view class="flx yy">
								<view class="yy_number">预约：{{item.number}}次</view>
								<view class="yy_jl">{{item.jtext}}</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				aa:'',
				sousuo: '',
				menList:[
					{
						name:'三甲体检',
						image:'/static/reservationRegister/tj.png'
					},
					{
						name:'门诊急诊',
						image:'/static/reservationRegister/mz.png'
					},
					{
						name:'医院排行榜',
						image:'/static/reservationRegister/phb.png'
					}
				],
				doctorList:[
					{
						text:'白求恩医院',
						Image:'/static/reservationRegister/listimage.png',
						arraytext:['三甲医院', '医院'],
						number: '132',
						jtext: '>1km'
					},
					{
						text:'医大附属医院',
						Image:'https://img0.baidu.com/it/u=3062740478,542670564&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1684947600&t=f41b20695f895633aa0c2e89a16d5893',
						arraytext:['三甲医院'],
						number: '123',
						jtext: '>9km'
					},
					{
						text:'山西医科医院',
						Image:'https://img0.baidu.com/it/u=4014148235,2873345530&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1684947600&t=5ae60ffa580b5ed4df3d21ddd89f45de',
						arraytext:['三甲医院'],
						number: '232',
						jtext: '>10km'
					},
					{
						text:'贵州第二人民医院',
						Image:'https://img0.baidu.com/it/u=2901357735,1433632349&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1684947600&t=2a54dbfdf9f835936b52f10db111c9d1',
						arraytext:['三甲医院', '儿童医院'],
						number: '456',
						jtext: '>28km'
					}
				]
			}
		},
		onLoad(options){
			console.log(options);
			let aa = uni.getStorageSync('index')
			console.log(aa);
			
		},
		beforeDestroy(){
			uni.removeStorageSync('index')
		},
		methods:{
			clickdortor(item){
				let str = JSON.stringify(item)
				uni.setStorageSync('yyname',item.text)
				uni.navigateTo({
					url:'/pages/reservationRegister/reservationDoctor?data=' + encodeURIComponent(str)
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.backgrpund {
		width: 100%;
		height: 300rpx;
		background: linear-gradient(#0c8efc, #00b8fe);
		.suosuostyleInput {
			width: 90%;
			margin: 0 auto;
			// background-color: #fff;
			background-color: rgba(255, 255, 255, .4);
			border-radius: 20rpx;
			height: 60rpx;
		
			.plc {
				font-size: 28rpx;
				color: #fff;
				font-weight: 600;
				letter-spacing: 2rpx;
			}
		}
	}
	
	.styletop{
		width: 85%;
		margin:0 auto;
		margin-top:30rpx;
		.styletop_image{
			width: 85rpx;
			height: 85rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.styletop_name{
			font-size: 30rpx;
			font-weight: 600;
			text-align: center;
			letter-spacing: 2rpx;
			margin-top:20rpx;
		}
	}
	.shanxuan{
		.shanxuan_{
			
			.shanxuan_text{
				font-size: 31rpx;
				font-weight: 600;
				letter-spacing: 1rpx;
			}
			.sanjiao {
				width: 0px;
				height: 0px;
				border-top: 8px solid #333;
				border-left: 3px solid transparent;
				border-right: 3px solid transparent;
				border-bottom: 3px solid transparent;
				border-radius: 40rpx;
			}
		}

	}
	
	.styleIndex{
		width: 100%;
		.styleIndex_{
			border-bottom: 1rpx solid #e8e8e8;
			margin-top:30rpx;
			padding: 20rpx;
			overflow: hidden;
			box-sizing: border-box;
			.styleIndex_j{
				width: 90%;
				margin: 0 auto;
				.styleIndex_j_image{
					width: 35%;
					height: 200rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.styleIndex_j_text{
					width: 60%;
					.header{
						font-size: 32rpx;
						font-weight: 600;
					}
					.array{
						margin-top: 30rpx;
						.array_{
							color: #c8c8c8;
							font-size: 25rpx;
							margin-left: 30rpx;
							font-weight: 600;
						}
					}
					.array :first-child{
						color: #ee724b;
						margin-left: 0rpx;
					}
					.yy{
						margin-top:40rpx;
						.yy_number{
							font-size: 25rpx;
						}
						.yy_jl{
							font-size: 25rpx;
							color: #e8e8e8;
						}
					}
				}
			}
		}
		
	}
	.styleIndex :last-child{
		border-bottom: none;
	}
</style>